<template>
  <div>
    <div class="goto" @click="goto">goto华语音乐==></div>
    <div class="app">
      <div class v-for="item of value" :key="item.title" @click="click(item)">
        <img :src="item.pic" alt />
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import top250 from "../../models/top250";
export default {
  data() {
    return {
      value: []
    };
  },
  async mounted() {
    var res = await top250();
    this.value = res.data.result;
  },
  methods: {
    click(e) {
      this.$router.push({ name: "Detail", query: { value: e } });
    },
    goto(){
        this.$router.push({ name: "MusicHome"});
    }
  }
};
</script>

<style scoped>
.app {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px 30px;
}
.goto{
    font-size: 25px;
    width: max-content;
    margin: 0 auto;
}
</style>